<template>
  <el-card class="question-container">
    <el-form ref="form" :model="page" :rules="rules" label-width="80px">
      <el-form-item label="关键字" prop="keyword">
        <el-col :span="12">
          <el-input
            v-model="page.keyword"
            style="width:40%"
            placeholder="根据编号搜索"
          ></el-input>
        </el-col>
        <el-col :span="12">
          <el-row type="flex" justify="end">
            <el-button size="small" @click="clearFn">清除</el-button>
            <el-button
              size="small"
              type="primary"
              @click="getQuestionRandomList"
              >搜索</el-button
            >
          </el-row>
        </el-col>
      </el-form-item>
    </el-form>
    <el-alert
      style="margin-bottom:15px"
      type="info"
      show-icon
      :closable="false"
    >
      <span slot="title">数据一共 {{ counts }} 条</span>
    </el-alert>
    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column align="center" label="编号" prop="id"></el-table-column>
      <!-- 利用列格式化属性处理题型 :formatter="方法名"-->
      <el-table-column
        align="center"
        label="题型"
        :formatter="formatConstants"
        prop="questionType"
      ></el-table-column>
      <el-table-column
        align="center"
        label="题目编号"
        prop="questionIDs"
        width="300px"
      >
        <template slot-scope="{ row }">
          <a
            style="display: block;color:#0099ff"
            v-for="(item, index) in row.questionIDs"
            :key="index"
            @click="getQuestionsDialog(item)"
            >{{ item.number }}</a
          >
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="录入时间"
        prop="addTime"
      ></el-table-column>
      <el-table-column
        align="center"
        label="答题时间(s)"
        prop="totalSeconds"
      ></el-table-column>
      <el-table-column
        align="center"
        label="正确率(%)"
        prop="accuracyRate"
      ></el-table-column>
      <el-table-column
        align="center"
        label="录入人"
        prop="userName"
      ></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            plain
            @click="removeQuestion(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="end">
      <el-pagination
        style="margin-top:20px"
        background
        layout="prev, pager, next, sizes, jumper"
        :page-sizes="[5, 10, 20, 30, 50, 100]"
        :page-size="page.pagesize"
        :current-page="page.page"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </el-row>
    <!-- 试题预览组件 -->
    <questions-preview
      :questionDialog.sync="questionDialog"
      :questionDialogDate="questionDialogDate"
    />
  </el-card>
</template>

<script>
import {
  getQuestionRandomList,
  delQuestionRandomList,
  detail
} from '@/api/hmmm/questions.js'
import * as Constants from '@/api/hmmm/constants.js'
// 试题预览组件
import QuestionsPreview from '../components/questions-prev.vue'
export default {
  name: 'QuestionsRandoms',
  components: {
    QuestionsPreview
  },
  data() {
    return {
      tableData: [], // 表格数据
      page: {
        page: 1,
        pagesize: 5,
        keyword: ''
      },
      counts: '', // 总条数
      total: 0,
      // formDate:{
      //   keyword:''
      // },
      rules: {},
      loading: false,
      questionDialogDate: {}, // 弹层数据
      questionDialog: false // 弹层显示隐藏
    }
  },
  created() {
    this.getQuestionRandomList()
  },
  methods: {
    async removeQuestion(val) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 删除接口
        console.log(val)
        await delQuestionRandomList(val)
        // 提示信息

        this.$message.success('删除成功')
        // 重新渲染页面
        this.getQuestionRandomList()
      } catch (error) {
        if (error === 'cancel') {
          this.$message.error('取消删除')
        } else {
          this.$message.error(error)
        }
      }
    },
    async getQuestionRandomList() {
      this.loading = true
      const { data } = await getQuestionRandomList(this.page)
      console.log(data)
      // 获取总条数
      this.counts = data.counts
      this.total = data.counts
      // 表格数据
      this.tableData = data.items
      // 关闭加载中
      this.loading = false
    },
    // 页码改变
    handleCurrentChange(val) {
      this.page.page = val
      this.getQuestionRandomList()
    },
    // 每页多少条改变
    handleSizeChange(val) {
      this.page.pagesize = val
      this.getQuestionRandomList()
    },
    // 处理题型
    formatConstants(row, column, cellValue, index) {
      const obj = Constants.difficulty.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 清楚表单框
    clearFn() {
      this.$refs.form.resetFields()
    },
    // 弹层数据
    async getQuestionsDialog(item) {
      try {
        // console.log(item)
        this.questionDialog = true
        const { data } = await detail({ id: item.id })
        this.questionDialogDate = data
        console.log(data)
      } catch (error) {
        this.$message.error(error)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.question-container {
  margin: 10px 10px;
  .el-button--danger {
    color: #f56c6c;
    background-color: #fef0f0;
    border-color: #f56c6c;
  }
  .el-button--danger:hover {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
  }
}
</style>
